<template>
	<view class="pb-safe-area">
		<view class="tab p-4">
			<view class="flex-1 bg-white rounded-4">
				<view class="flex">
					<text class="flex-1 py-4 text-center h9" @tap="navClick(item)"
						:class="item.scene == search.action ? 'text-primary font-weight-600' : ''"
						v-for="(item, index) in navList" :key="index" :id="item.scene">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 记录列表 -->
		<view class="p-4 flex flex-column grid-gap-4" v-if="list.length > 0">
			<view class="bg-white p-4 rounded-4 flex flex-center grid-gap-2" v-for="(item, index) in list"
				:key="item.id">
				<uni-icons type="wallet" color="var(--xl-danger-light-3)" size="20"
					v-if="item.action == 'increase'"></uni-icons>
				<uni-icons type="wallet" color="var(--xl-primary)" size="20" v-else></uni-icons>
				<view class="flex-1 flex flex-column grid-gap-2">
					<text class="text-primary font-weight-600">
						{{ item.remarks }}
					</text>
					<text class="h9 text-placeholder"> {{ item.create_time }} </text>
				</view>
				<view class="flex flex-x-flex-end" style="width:100px">
					<x-money type="danger-light-3" unit-type="danger-light-3" weight="bold" size="8" :money="item.money" unit="">
						<template #prefix>
							<text class="h10 text-danger-light-3">￥</text>
						</template>
					</x-money>
				</view>
			</view>
			<x-more :status="loading" @load="getList()"></x-more>
		</view>
		<view v-else class="vh-50 flex flex-center">
			<x-empty type="log" text="暂无余额记录"></x-empty>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { $page, $api, $http, $message } from "@/utils";
const loading = ref('loadmore');
const search = ref({
	page: 1,
	action: 'increase',
});
const navList = ref([
	{ name: '收入', scene: 'increase' },
	{ name: '冻结中', scene: 'freezeMoney' },
	{ name: '支出', scene: 'decrease' },
]);
const list = ref([]);
const getList = () => {
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.Wallet.salesmanLog(search.value).then(data => {
		list.value = [...list.value, ...data.data];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			nextTick(() => {
				loading.value = 'nomore';
			})
		}
	}).catch(() => {
		nextTick(() => {
			loading.value = 'nomore';
		})
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
	})
}
const navClick = (e) => {
	search.value.action = e.scene;
	list.value = [];
	search.value.page = 1;
	loading.value = 'loadmore';
	getList();
}
onLoad(() => {
	getList();
})
onReachBottom(() => {
	getList();
})
</script>
<style lang="scss" scoped>
.tab {
	position: sticky;
	/* #ifdef H5 */
	top: var(--window-top);
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	z-index: 999;
	background-color: $uni-bg-color-grey;

	&-body {
		height: 50px;
		line-height: 50px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 20px;

		&-item {
			padding: 0 10px;
			word-break: nowrap;
			white-space: nowrap;
		}
	}
}
</style>
